<!--多列表头表格-->
<template>
  <table class="SelfTable" :style="{'width': widthTable}">
    <tbody>
    <tr v-for="(item, index) in dataList" :key="index" class="tr" >
      <template v-for="(itemChild, indexChild) in item">
        <th :style="{width: widthTh}" class="th" >
          <slot name="th">
            {{itemChild.th}}
          </slot>
        </th>
        <td class="td" :class="{typeForm: type === 'form'}" :colspan="itemChild.colspan" >
          <slot name="td" v-bind:tdItem="itemChild.td">
            <FormItemCreator
              class="fixMargin"
              v-if="type === 'form'"
              v-bind="itemChild.td" :val.sync="formData[itemChild.td.key]"/>
            <template v-else>
              <span :class="setColor(itemChild.td)">
                {{getThData(itemChild.td)}}
              </span>
            </template>
          </slot>
        </td>
      </template>
    </tr>
    </tbody>
  </table>
</template>

<script type="text/ecmascript-6">
  export default {
    props: {
      // type === 'form' 时，外层组件需要含有el-form表单
      type: {
        type: String,
        validator: val => ['txt', 'form', 'prop'].includes(val),
        default: 'txt'
      },
      // type === 'prop' 时使用
      farObj: {
        type: Object
      },
      /**
       * 一个二维数组，元素包含th、td属性生成对应html
       * @param Array.Array.<object> opt
       * @param <string> opt.th
       * @param <string | object> opt.td 若type === 'from' 参数参考组件FormItemCteator 若type === 'prop' 则参考{key: String, fn: Function | null}
       * */
      dataList: {
        type: Array,
        required: true
      },
      widthTh: {
        type: String,
        default: '150px'
      },
      colspan: { // 2019-6-3 修改 向上修改兼容合并单元格
        type: String
      },
      widthTable: {
        type: String
      }

    },
    created () {
      if (this.type === 'form') {
        this.initFormData()
      }
    },
    data () {
      return {
        // 仅当type === 'from' 时有用，通过initFormData()初始化数据
        formData: {}
      }
    },
    methods: {
      initFormData () {
        // 数据扁平化
        let sumList = this.dataList.reduce((sumList, item) => {
          return [...sumList, ...item]
        }, [])
        this.formData = sumList.reduce((o, item) => {
          Reflect.set(o, item.key, item.default)
          return o
        }, {})
      },
      getThData (td) {
        if (this.type === 'txt') {
          return td
        } else if (this.type === 'prop') {
          if (!this.farObj) throw new Error('type === prop时，必须传farObj值！')

          if (td.fn) {
            return td.fn(this.farObj[td.key])
          } else if (td.type === 'time') {
            return this.formatDate(this.farObj[td.key], {outType: td.timeOutType || 'YMDHms'})
          } else if (td.remoteKey) {
            // 传入remoteKey的处理
            // {th: '退款类型', td: {key: 'refundType', remoteKey: 'orders_refund_type'}}
            return this.findRemoteParamsText(td.remoteKey, this.farObj[td.key])
          } else {
            return typeof td !== 'object' ? this.farObj[td] : this.farObj[td.key]
          }
        }
      },
      setColor (td) {
        if (td.color) {
          return td.color
        }

        return ''
      }
    }
  }
</script>

<style scoped rel="stylesheet/scss" type="text/scss" lang="scss">
  .SelfTable {
    width: 100%;
  }

  .tr {
    &:hover {
      background-color: #f8f8f8;
    }
    .th, .td {
      /* 由于table的机制，min-height无效，用height即可，内容会自动撑开 */
      height: 40px;
      padding: 0 10px;
      border: 1px solid #e2e2e2;
      line-height: 20px;
      text-align: center;
      vertical-align: center;
    }
  }

  .th {
    background-color: #f2f2f2;
  }

  .td {
    &.typeForm {
    }
  }

  .fixMargin {
    margin: 0;
  }
</style>
